<template>
  <custom-window :title="title" :customHead="true">
    <div class="com-title com-title2">
      <div class="row-title">
        <div class="l-title">油罐信息</div>
        <img src="../assets/img/title-bg2.png" class="img" alt="" />
        <div class="r-tab">
          <div
            class="tab-item"
            :class="currentTab == index ? 'active' : ''"
            @click="onTab(index, false)"
            v-for="(item, index) of tabList"
            :key="index"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="guan-wrap">
        <!-- 4个罐罐 -->
        <div
          :class="
            currentTab == 0
              ? 'guan3'
              : currentTab == 1
              ? 'guan2'
              : currentTab == 2
              ? 'guan1'
              : currentTab == 3
              ? 'guan4'
              : currentTab == 4
              ? 'guan5'
              : ''
          "
        >
          <div
            class="info-wrap"
            v-for="(item, index) of guanData"
            :key="item.id"
          >
            <div class="info-box">
              <div class="num">{{ Math.floor(item.bfb * 100) }}%</div>
              <div
                class="guanEchart"
                :ref="'guanEchart' + index"
                :id="'chart1-' + (index + 1)"
              ></div>
            </div>
            <div class="desc">
              <div class="name">{{ item.ygCode }}({{ item.ygTypeName }})</div>
              <div class="yw">液位：{{ item.ygLevel }}米</div>
              <div class="zl">重量：{{ item.ygWeight }}吨</div>
              <div class="tj">体积：{{ item.ygVolume || 0 }}m³</div>
              <div class="wd" v-if="showWd">
                温度：{{ item.ygTemperature }}℃
              </div>
            </div>
          </div>
        </div>
        <!--10个罐罐 -->
        <!-- <div class="guan2" v-if="currentTab == 1">
          <div class="info-wrap" v-for="(item, index) of guanData" :key="item.id">
            <div class="info-box">
              <div class="num">{{ item.bfb * 100 }}%</div>
              <div class="guanEchart" :ref="'guanEchart' + index" :id='"chart1-" + (index + 1)'></div>
            </div>
            <div class="desc">
              <div class="name">{{ item.ygCode }}</div>
              <div class="yw">液位：{{ item.ygLevel }}L</div>
              <div class="zl">重量：{{ item.zl }}Kg</div>
            </div>
          </div>
        </div> -->
        <!-- 14个罐罐 -->
        <!-- <div class="guan3" v-if="currentTab == 2">
          <div class="info-wrap" v-for="(item, index) of guanData" :key="item.id">
            <div class="info-box">
              <div class="num">{{ item.bfb * 100 }}%</div>
              <div class="guanEchart" :ref="'guanEchart' + index" :id='"chart1-" + (index + 1)'></div>
            </div>
            <div class="desc">
              <div class="name">{{ item.ygCode }}</div>
              <div class="yw">液位：{{ item.ygLevel }}L</div>
              <div class="zl">重量：{{ item.zl }}Kg</div>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </custom-window>

  <!--
        这里的思路是
        1：根据筛选条件展示4,10,14个div，对应规格一，规格二，规格三
        2：div的id分别为chart1-1至chart1-14
        3：【规格二】循环14次进行图表渲染，渲染方式参考CardItem6
        4：在进行渲染时，需考虑要先销毁当前的所有图标在重新进行第三步骤即可
        例如有一个方法
        changeGuige(14) {
          this.$disposeCharts() // 销毁当前所有图表
          for (let i =0;i< 14;i++)
          const chart = this.$getChartInstance('#chart1-' + (i + 1))
          // do something
        }
        5：页面初始化直接调用this.changeGuige(4)即可
        6：在结合一个loadData方法获取数据即可
      -->
</template>

<script>
import CustomWindow from '@/components/CustomWindow'
import minxin from '@/utils/mixin'
import 'echarts-liquidfill'

export default {
  mixins: [minxin],
  name: 'CardItem1',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  components: {
    CustomWindow
  },
  data () {
    return {
      tabList: [
        {
          name: '一库区',
          id: '1'
        },
        {
          name: '二库区',
          id: '2'
        },
        {
          name: '三库区',
          id: '3'
        },
        {
          name: '四库区',
          id: '4'
        },
        {
          name: '五库区',
          id: '5'
        }
      ],
      currentTab: 0,
      guanList: [],
      guanData: [],
      showWd: false
    }
  },
  computed: {
  },
  watch: {
  },
  created () {
    // do something
    this.getSwitch()
    this.getGuanData().then(() => {
      this.filterGuanData()
      this.renderGuanEchart()
      this.initTimer()
      this.initPolling()
    })
  },
  methods: {
    filterGuanData () {
      const type = this.tabList[this.currentTab]

      this.guanData = this.guanList.filter(item => item.ygRegion === type.id)
    },
    initPolling () {
      this._timer2 = setInterval(this.getGuanData, 60 * 60 * 1000)
    },
    initTimer () {
      this._timer = setInterval(() => {
        let index = this.currentTab
        if (index === 4) {
          index = 0
        } else {
          index++
        }
        this.onTab(index, true)
      }, 60 * 1000)
    },
    getSwitch () {
      this.$axios.get(this.$apis.screen.selectYgTemperatureSwitch).then(res => {
        if (res) {
          this.showWd = !!(res === '1' || res === '2' ||
            res === '3')
        }
      })
    },
    getGuanData () {
      return this.$axios.get(this.$apis.screen.selectYgInfoList).then(res => {
        if (res) {
          res.forEach(item => {
            item.bfb = (item.ygHeight === '0' || !item.ygHeight) ? '0' : Number(item.ygLevel) / Number(item.ygHeight)
          })
          this.guanList = res || []
        }
      })
    },

    renderGuanEchart () {
      this.$disposeCharts()
      this.$nextTick(() => {
        for (let i = 0; i < this.guanData.length; i++) {
          const chartElement = this.$getChartInstance('#chart1-' + (i + 1))

          //
          if (chartElement) {
            // this['guanEchart' + i].clear()

            // const value = Number(this.guanData[i].bfb) >= 0.7 ? 0.7 : this.guanData[i].bfb - 0
            // const value1 = Number(this.guanData[i].bfb) >= 0.7 ? 0.8 : Number(this.guanData[i].bfb) - 0 + 0.1
            // const value2 = Number(this.guanData[i].bfb) >= 0.7 ? 0.75 : Number(this.guanData[i].bfb) - 0 - 0.1
            let value = 0
            let value1 = 0
            let value2 = 0
            if (this.currentTab === 0 || this.currentTab === 3) {
              value = Number(this.guanData[i].bfb) >= 0.7 ? 0.7 : this.guanData[i].bfb - 0
              value1 = Number(this.guanData[i].bfb) >= 0.7 ? 0.8 : Number(this.guanData[i].bfb) - 0 === 0 ? 0 : Number(this.guanData[i].bfb) - 0 + 0.1
              value2 = Number(this.guanData[i].bfb) >= 0.7 ? 0.75 : Number(this.guanData[i].bfb) - 0 === 0 ? 0 : Number(this.guanData[i].bfb) - 0 - 0.1
            }
            if (this.currentTab === 1 || this.currentTab === 2 || this.currentTab === 4) {
              value = Number(this.guanData[i].bfb) >= 0.6 ? 0.6 : this.guanData[i].bfb - 0
              value1 = Number(this.guanData[i].bfb) >= 0.5 ? 0.5 : Number(this.guanData[i].bfb) - 0 === 0 ? 0 : Number(this.guanData[i].bfb) - 0 + 0.1
              value2 = Number(this.guanData[i].bfb) >= 0.5 ? 0.55 : Number(this.guanData[i].bfb) - 0 === 0 ? 0 : Number(this.guanData[i].bfb) - 0 - 0.1
            }

            const options = {

              series: [
                {
                  type: 'liquidFill',
                  radius: this.currentTab === 1 ? '100%' : '78%',
                  center: this.currentTab === 1 ? ['50%', '40%'] : ['50%', '50%'],
                  color: [
                    {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#446bf550'
                        },
                        {
                          offset: 1,
                          color: '#2ca3e250'
                        }
                      ],
                      globalCoord: true
                    }
                  ],
                  // data: [10], // data个数代表波浪数
                  data: [value, value1, value2], // data个数代表波浪数
                  backgroundStyle: {
                    borderWidth: 0,
                    color: 'RGBA(51, 66, 127, 0)'
                  },
                  label: {
                    show: false

                  },
                  outline: {
                    show: false
                    // borderDistance: 0,
                    // itemStyle: {
                    //   borderWidth: 0,
                    //   borderColor: '#11216550'
                    // }
                  }
                }

              ]
            }
            // this['guanEchart' + i].clear()
            // this['guanEchart' + i].setOption(options)
            chartElement.clear()
            chartElement.setOption(options)

            window.addEventListener('resize', () => {
              chartElement.resize()
            })
          }
        }
      })
    },

    onTab (index, auto) {
      if (!auto) {
        clearInterval(this._timer)
        this.initTimer()
      }
      this.currentTab = index
      this.filterGuanData()
      this.renderGuanEchart()
    }
  }
}

</script>

<style scoped lang="scss">
.content {
  height: 100%;
}

.com-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  background-image: url("../assets/img/title-bg.png");
  background-size: auto 100%;
  background-repeat: no-repeat;
  padding: 0 20px 0 50px;

  &.com-title2 {
    // background-image: url("../assets/img/title-bg2.png");
    padding: 0;
    position: relative;

    .img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      z-index: 2;
    }

    .row-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0 20px 0 50px;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      background-image: -webkit-linear-gradient(
        right,
        #0b4c7f,
        #0e3059,
        #0e3059
      );
    }

    .r-tab {
      display: flex;
      align-items: center;
      border-radius: 4px;
      height: 40px;
      position: relative;
      z-index: 3;

      .tab-item {
        width: 120px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: #fff;
        cursor: pointer;
        background-image: url("../assets/img/btn-bg.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;

        &.active {
          background-image: url("../assets/img/btn-bg2.png");
        }
      }
    }
  }

  .l-title {
    font-size: 18px;
    letter-spacing: 2px;
    font-family: Alimama;
    background-image: -webkit-linear-gradient(bottom, #14a8ed, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .r-date {
    ::v-deep .el-date-editor {
      border: 1px solid #04577e;
      height: 38px;
      border-radius: 4px;
      background-color: transparent;

      width: 120px;

      .el-input__inner {
        background-color: transparent;
        border: none;
        text-align: center;
        color: #63bdf1;
        font-size: 16px;
        display: flex;
        align-items: center;
        line-height: 38px;
        justify-content: center;
        height: 100%;
        padding-right: 10px;
      }

      .el-input__prefix {
        color: #63bdf1;
        transform: translateY(-1px);
        font-size: 14px;
      }
    }
  }
}

.guan-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-wrap: wrap;

  .guan1 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    flex: 1;
    height: 100%;
    padding: 0 12px;

    .info-wrap {
      width: 24%;
      height: 100%;
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .info-box {
      background-image: url("../assets/img/bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      height: 52%;

      .num {
        position: absolute;
        top: 40px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 32px;
        color: #fff;
        text-align: center;
        font-family: ShiShangZhongHeiJianTi;
      }

      .guanEchart {
        width: 100%;
        height: 80%;
      }
    }

    .desc {
      margin-top: 10px;
      height: 40%;
      width: 100%;
      transform: translateY(-30px);

      .name {
        font-size: 20px;
        text-align: center;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .yw {
        font-size: 14px;
        color: #f77f07;
        text-align: center;
        margin: 10px 0;
      }

      .zl {
        font-size: 14px;
        color: #11e6f5;
        margin-top: 6px;
        text-align: center;
      }

      .tj {
        font-size: 14px;
        color: #2bc77e;
        margin-top: 6px;
        text-align: center;
      }

      .wd {
        font-size: 14px;
        color: #b2b0e8;
        margin-top: 6px;
        text-align: center;
      }
    }
  }

  .guan2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    width: 100%;
    height: 100%;
    padding: 0 12px;
    overflow: hidden;
    flex-wrap: wrap;

    .info-wrap {
      width: 17%;
      height: 46%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      transform: translateY(-30px);

      &:nth-child(n + 6) {
        margin-top: 10px;
      }

      &:nth-child(6),
      &:nth-child(7),
      &:nth-child(8),
      &:nth-child(9),
      &:nth-child(10) {
        transform: translateY(-70px);
      }
    }

    .info-box {
      background-image: url("../assets/img/bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      height: 62%;

      .num {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 28px;
        color: #fff;
        text-align: center;
        font-family: ShiShangZhongHeiJianTi;
      }

      .guanEchart {
        width: 100%;
        height: 80%;
      }
    }

    .desc {
      margin-top: 0px;
      height: 10%;
      width: 100%;
      transform: translateY(-20px);

      .name {
        font-size: 18px;
        text-align: center;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .yw {
        font-size: 12px;
        color: #f77f07;
        text-align: center;
        margin: 4px 0;
      }

      .zl {
        font-size: 12px;
        color: #11e6f5;
        text-align: center;
        margin: 4px 0;
      }

      .tj {
        font-size: 12px;
        color: #2bc77e;
        text-align: center;
        margin: 4px 0;
      }

      .wd {
        font-size: 12px;
        color: #b2b0e8;
        text-align: center;
        margin: 4px 0;
      }
    }
  }

  .guan3 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    width: 100%;
    height: 100%;
    padding: 0 12px;
    overflow: hidden;
    flex-wrap: wrap;

    .info-wrap {
      width: 13%;
      height: 38%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-top: 10px;

      &:nth-child(8),
      &:nth-child(9),
      &:nth-child(10),
      &:nth-child(11),
      &:nth-child(12),
      &:nth-child(13),
      &:nth-child(14) {
        transform: translateY(-60px);
      }
    }

    .info-box {
      background-image: url("../assets/img/bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      height: 66%;

      .num {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 24px;
        color: #fff;
        text-align: center;
        font-family: ShiShangZhongHeiJianTi;
      }

      .guanEchart {
        width: 100%;
        height: 80%;
      }
    }

    .desc {
      margin-top: 10px;
      height: 10%;
      width: 100%;
      transform: translateY(-40px);

      .name {
        font-size: 16px;
        text-align: center;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 12px;
      }

      .yw {
        font-size: 12px;
        color: #f77f07;
        text-align: center;
        margin: 4px 0;
      }

      .zl {
        font-size: 12px;
        color: #11e6f5;
        text-align: center;
        margin: 4px 0;
      }

      .tj {
        font-size: 12px;
        color: #2bc77e;
        text-align: center;
        margin: 4px 0;
      }

      .wd {
        font-size: 12px;
        color: #b2b0e8;
        text-align: center;
        margin: 4px 0;
      }
    }
  }
  .guan4 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    width: 100%;
    height: 100%;
    padding: 0 12px;
    overflow: hidden;
    flex-wrap: wrap;

    .info-wrap {
      width: 15%;
      height: 39%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      &:nth-child(7),
      &:nth-child(8),
      &:nth-child(9),
      &:nth-child(10),
      &:nth-child(11),
      &:nth-child(12) {
        transform: translateY(-50px);
      }
    }

    .info-box {
      background-image: url("../assets/img/bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      height: 66%;

      .num {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 24px;
        color: #fff;
        text-align: center;
        font-family: ShiShangZhongHeiJianTi;
      }

      .guanEchart {
        width: 100%;
        height: 80%;
      }
    }

    .desc {
      margin-top: 10px;
      height: 10%;
      width: 100%;
      transform: translateY(-40px);

      .name {
        font-size: 16px;
        text-align: center;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 12px;
      }

      .yw {
        font-size: 12px;
        color: #f77f07;
        text-align: center;
        margin: 4px 0;
      }

      .zl {
        font-size: 12px;
        color: #11e6f5;
        text-align: center;
        margin: 4px 0;
      }

      .tj {
        font-size: 12px;
        color: #2bc77e;
        text-align: center;
        margin: 4px 0;
      }

      .wd {
        font-size: 12px;
        color: #b2b0e8;
        text-align: center;
        margin: 4px 0;
      }
    }
  }
  .guan5 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    width: 100%;
    height: 100%;
    padding: 0 12px;
    overflow: hidden;
    flex-wrap: wrap;

    .info-wrap {
      width: 16%;
      height: 58%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-top: 20px;

    }

    .info-box {
      background-image: url("../assets/img/bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      height: 62%;

      .num {
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 28px;
        color: #fff;
        text-align: center;
        font-family: ShiShangZhongHeiJianTi;
      }

      .guanEchart {
        width: 100%;
        height: 80%;
      }
    }

    .desc {
      margin-top: 0px;
      height: 10%;
      width: 100%;
      transform: translateY(-20px);

      .name {
        font-size: 18px;
        text-align: center;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .yw {
        font-size: 12px;
        color: #f77f07;
        text-align: center;
        margin: 4px 0;
      }

      .zl {
        font-size: 12px;
        color: #11e6f5;
        text-align: center;
        margin: 4px 0;
      }

      .tj {
        font-size: 12px;
        color: #2bc77e;
        text-align: center;
        margin: 4px 0;
      }

      .wd {
        font-size: 12px;
        color: #b2b0e8;
        text-align: center;
        margin: 4px 0;
      }
    }
  }
}
</style>
